import React, { Component } from 'react';
import { Alert, Button } from 'antd';
import SendCode from '../common/SendCode';
import LinkTitle from '../common/LinkTitle';
export default class ChangePsd extends Component {
  constructor(props) {
    super(props);
    this.state = {
      code: '',
      newPsd: '',
      confirmPsd: ''
    };
  }
  componentDidMount() {
    this.closeErrMsg();
  }
  closeErrMsg() {
    const { errMsg, showErrmsg } = this.props;
    if (errMsg) {
      showErrmsg('');
    }
  }
  submit() {
    const { newPsd, confirmPsd, code } = this.state;
    const { resetPsd, showErrmsg } = this.props;
    if (!code) {
      showErrmsg('验证码不能为空');
      return;
    }
    if (!newPsd) {
      showErrmsg('密码不能为空');
      return;
    }
    if (!confirmPsd) {
      showErrmsg('确认密码不能为空');
      return;
    }
    if (newPsd != confirmPsd) {
      showErrmsg('两次密码输入不一致');
      return;
    }
    showErrmsg('');
    resetPsd({ code, password: newPsd });
  }
  confirmPsd(value) {
    this.setState({
      confirmPsd: value
    });
    const { newPsd } = this.state;
    if (newPsd != value) {
      const { showErrmsg } = this.props;
      showErrmsg('输入的密码不一致');
    }
  }
  render() {
    const { errMsg, phone, loading } = this.props;
    const { newPsd, confirmPsd, code } = this.state;
    return (
      <div className="userCWrapper security">
        <div className="ltWrapper">
          <LinkTitle title="修改密码" />
        </div>
        <form className="editWrapper">
          <label className="label">
            <span className="mr10"> </span>
            <Alert
              message={errMsg}
              type="error"
              showIcon
              style={{
                width: '100%',
                display: errMsg ? 'block' : 'none',
                width: '16rem'
              }}
            />
          </label>
          <label className="label">
            <span className="mr10"> 手机号 </span>
            <input className="input" value={phone} disabled={true} />
          </label>
          {/* <div className="dfr w100" style={{ alignItems: 'stretch' }}> */}
          <label className="label code">
            <span className="mr10"> 验证码 </span>
            <input
              className="input"
              value={code}
              onChange={e => {
                this.closeErrMsg();
                this.setState({ code: e.target.value });
              }}
              placeholder="请输入验证码"
            />
            <SendCode phone={phone} api="/changePsd" />
          </label>

          {/* </div> */}
          <label className="label">
            <span className="mr10"> 您的密码 </span>
            <input
              className="input"
              type="password"
              value={newPsd}
              onChange={e => {
                this.closeErrMsg();
                this.setState({ newPsd: e.target.value });
              }}
              placeholder="8~20位密码"
            />
          </label>
          <label className="label">
            <span className="mr10"> 确认密码 </span>
            <input
              className="input"
              type="password"
              value={confirmPsd}
              onChange={e => this.confirmPsd(e.target.value)}
              placeholder="8~20位密码"
            />
          </label>
          <div className="textcenter">
            <Button
              className="btn primary"
              onClick={() => this.submit()}
              loading={loading}
            >
              {' '}
              保存{' '}
            </Button>
          </div>
        </form>
      </div>
    );
  }
}
